/** 
  学校管理员（研究生实习）查看专家评分情况及评语
*/
<template>
  <div class="experts-score-container">
    <div class="sub-title">{{ $t('baseAssessSetting.baseInfo') }}</div>
    <table class="table-style-baseinfos">
      <tbody>
        <tr>
          <td class="text-right-background-color">{{ $t('baseAssess.internshipBaseName') }}:</td>
          <td class="text-left-background-none">{{ dataListProp.baseName }}</td>
          <td class="text-right-background-color">{{ $t('baseAssessSetting.baseLevel') }}:</td>
          <td class="text-left-background-none">{{ dataListProp.baseLevelName }}</td>
        </tr>
        <tr>
          <td class="text-right-background-color">{{ $t('baseAssess.localProvinceAndCity') }}:</td>
          <td class="text-left-background-none">{{ dataListProp.baseVO.provinceCity }}</td>
          <td class="text-right-background-color">{{ $t('baseAssess.address') }}:</td>
          <td class="text-left-background-none">{{ dataListProp.baseVO.address }}</td>
        </tr>
        <tr>
          <td class="text-right-background-color">{{ $t('baseAssess.startTime') }}:</td>
          <td class="text-left-background-none">{{ dataListProp.baseVO.startTime }}</td>
          <td class="text-right-background-color">{{ $t('baseAssess.endTime') }}:</td>
          <td class="text-left-background-none">{{ dataListProp.baseVO.endTime }}</td>
        </tr>
        <tr>
          <td class="text-right-background-color">{{ $t('templateSetting.assessmentTemplate') }}:</td>
          <td colspan="3" class="text-left-background-none">
            <el-button type="text" @click="selectAssessIndexInfo">{{ dataListProp.baseExamineSettingVO.templateName }}</el-button>
          </td>
        </tr>
        <tr>
          <td class="text-right-background-color">{{ $t('baseAssessSetting.submitMaterialsStart') }}:</td>
          <td class="text-left-background-none">{{ dataListProp.baseExamineSettingVO.submitMaterialsStart }}</td>
          <td class="text-right-background-color">{{ $t('baseAssessSetting.submitMaterialsEnd') }}:</td>
          <td class="text-left-background-none">{{ dataListProp.baseExamineSettingVO.submitMaterialsEnd }}</td>
        </tr>
        <tr>
          <td class="text-right-background-color">{{ $t('baseAssessSetting.onSiteAssessTimeStart') }}:</td>
          <td class="text-left-background-none">{{ dataListProp.baseExamineSettingVO.onSiteExamineStart }}</td>
          <td class="text-right-background-color">{{ $t('baseAssessSetting.onSiteAssessTimeEnd') }}:</td>
          <td class="text-left-background-none">{{ dataListProp.baseExamineSettingVO.onSiteExamineEnd }}</td>
        </tr>
        <tr>
          <td class="text-right-background-color">{{ $t('baseAssessSetting.ratingTimeStart') }}:</td>
          <td class="text-left-background-none">{{ dataListProp.baseExamineSettingVO.scoreStart }}</td>
          <td class="text-right-background-color">{{ $t('baseAssessSetting.ratingTimeEnd') }}:</td>
          <td class="text-left-background-none">{{ dataListProp.baseExamineSettingVO.scoreEnd }}</td>
        </tr>
        <tr>
          <td class="text-right-background-color">{{ $t('baseAssessSetting.examinationDescrip') }}:</td>
          <td class="text-left-background-none" colspan="4">{{ dataListProp.baseExamineSettingVO.examineExplain }}</td>
        </tr>
      </tbody>
    </table>
    <div class="sub-title">{{ $t('baseAssess.submitMaterials') }}</div>
    <el-form class="upload-form" ref="form" :model="form" disabled label-width="80px">
      <el-form-item style="margin-bottom:0;" :label="$t('baseAssess.assessMaterials')+ ':'">
        <template v-for="(item, index) in applyForm.attachName">
          <div style="cursor: pointer;" :key="index" @click="downLoad(index)">{{ item }}</div>
        </template>
      </el-form-item>
    </el-form>
    <div class="score-container">
      <div class="sub-title score-info">{{ $t('baseAssess.scoreDetail') }}</div>
      <div class="score-info" style="text-align: right;">
        <el-button type="primary" @click="exportScoreDetail()">{{ $t('baseAssess.exportScoreDetail') }}</el-button>
      </div>
    </div>
    <table class="table-style-baseinfo">
      <thead>
        <tr>
          <th class="text-center-background-color">{{ $t('baseAssess.expertsName') }}</th>
          <th class="text-center-background-color">{{ $t('baseAssess.expertsComment') }}</th>
          <th class="text-center-background-color">{{ $t('baseAssess.score') }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in dataListProp.baseGradeList" :key="index">
          <td class="text-center-background">{{ item.specialistName }}</td>
          <td style="width: 70%;" class="text-center-background">{{ item.specialistComment }}</td>
          <td style="width: 10%;" class="text-center-background">{{ item.score }}</td>
        </tr>
        <tr>
          <td style="text-align: right;" colspan="3">得分:<span :style="!dataListProp.average ? 'margin-right: 15px;' : ''">{{ dataListProp.average }}</span></td>
        </tr>
      </tbody>
    </table>
    <!-- 考核指标表开始 -->
    <el-dialog
      @close="assessIndexInfo = {}"
      :title="$t('templateSetting.assessIndexTable')"
      width="70%"
      append-to-body
      :visible.sync="tableFlag"
      :close-on-click-modal="false"
      :close-on-press-escape="false">
      <assess-index-table  
        :dataListProp="assessIndexInfo"  
        :showFlag="tableFlag"
        :showWeight="false"
        @close="(flag) => { tableFlag = flag }">
      </assess-index-table>
    </el-dialog>
    <!-- 考核指标表结束 -->
    <div style="text-align: right;">
      <el-button @click="back()">{{$t('common.btn.back')}}</el-button>
    </div>
  </div>
</template>
<script>
import { downloadfile } from "common/src/api/upload";
import assessIndexTable from "../templateSetting/assessIndexTable";
import graduateStudentApi from 'common/src/api/graduateStudent/graduateStudent';
export default {
  components: {
    'assess-index-table': assessIndexTable
  },
  props: {
    detailScoreAssessBaseInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      userInfo: {},
      dataListProp: {},
      assessIndexInfo: {},
      tableFlag: false,
      form: {
        assessMaterials: ''
      },
      applyForm: {
        attachFile: [],
        attachName: []
      }
    }
  },
  filters: {
  },
  mounted() {
    // 获取当前用户auths权限
    let sessiondata = JSON.parse(localStorage.getItem("sessiondata"));
    if (sessiondata) {
      if (sessiondata.mockUser || sessiondata.user) {
        this.userInfo = sessiondata.mockUser || sessiondata.user;
      }
    }
  },
  methods: {
    // 查看考核指标表
    selectAssessIndexInfo() {
      this.tableFlag = true;
      graduateStudentApi.querySpecialListAssessIndex({
        "baseExamineId": this.detailScoreAssessBaseInfo.id,
        "templateId": this.detailScoreAssessBaseInfo.baseExamineSettingVO.templateId,
        "account": this.userInfo.uid
      }).then(res => {
        if (res.code === 200) {
          this.assessIndexInfo = res.data;
        }
      });
    },
    // 返回
    back() {
      this.$emit('close-detail-dialog');
    },
    // 下载文件
    downLoad(index) {
      downloadfile(this.applyForm.attachFile[index]);
    },
    // 导出评分详情
    exportScoreDetail() {
      this.$emit('export-base-assess-detail', {
        "id": this.dataListProp.id,
        "templateId": this.dataListProp.baseExamineSettingVO.templateId
      });
    }
  },
  watch: {
    detailScoreAssessBaseInfo: {
      handler(newVal) {
        if (newVal) {
          this.dataListProp = JSON.parse(JSON.stringify(newVal));
          this.applyForm.attachFile = this.dataListProp.examineMaterial ? this.dataListProp.examineMaterial.split(',') : [];
          this.applyForm.attachName = this.dataListProp.examineMaterialName ? this.dataListProp.examineMaterialName.split(',') : [];
        }
      },
      deep: true,
      immediate: true
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .table-style-baseinfos {
    table-layout: fixed;
    word-break: break-all;
    margin: 0 0 20px 15px;
    background-color: rgba(210, 212, 214, 1);
    box-sizing: border-box;
    border-width: 0.5px;
    border-style: solid;
    border-color: rgba(210, 212, 214, 1);
    border-radius: 0px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    width: 97%;
    font-weight: 401;
    font-style: normal;
    font-size: 14px;
    color: #8896a7;
  }
  .table-style-baseinfo {
    table-layout: fixed;
    word-break: break-all;
    background-color: rgba(210, 212, 214, 1);
    box-sizing: border-box;
    border-width: 0.5px;
    border-style: solid;
    border-color: rgba(210, 212, 214, 1);
    border-radius: 0px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    width: 100%;
    font-weight: 401;
    font-style: normal;
    font-size: 14px;
    color: #8896a7;
    margin-bottom: 20px;
  }
  .table-style-baseinfos td {
    width: 25%;
    background-color: rgba(255, 255, 255, 1);
    border: none;
    border-radius: 0px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-weight: 401;
    font-style: normal;
    font-size: 14px;
    color: #2b3b4e;
    // height: 32px;
    padding: 10px;
  }
  .table-style-baseinfo td {
    // width: 25%;
    background-color: rgba(255, 255, 255, 1);
    border: none;
    border-radius: 0px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-weight: 401;
    font-style: normal;
    font-size: 14px;
    color: #2b3b4e;
    height: 32px;
    padding: 0 10px;
  }
  .table-style-baseinfos .text-right-background-color {
    background-color: #fdfeff4d;
    text-align: right;
  }
  .table-style-baseinfo .text-right-background-color {
    background-color: #fdfeff4d;
    text-align: right;
  }
  .text-center-background-color {
    background-color: #fdfeff4d;
    text-align: center;
  }
  .text-center-background {
    text-align: center;
  }
  .text-left-background-none {
    text-align: left;
  }
  .sub-title {
    margin: 0 0 15px 5px;
    font-size: 17px;
    color: #2b3b4e;
  }
  .upload-form {
    margin-left: 20px;
    margin-bottom: 10px;
  }
  .dialog-footer {
    padding: 20px 20px 5px 0;
    text-align: right;
  }
  .experts-score-container ::v-deep {
    .el-dialog__body {
      word-break: break-all!important;
    }
  }
  .score-container {
    display: table;
    width: 100%;
    margin-bottom: 15px;
    .score-info {
      display: table-cell;
    }
  }
</style>